<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
</head>
<body>
<script src="../jquery-1.7.2.js"></script>
<style>
    ul,li {
        list-style: none;
    }
    .crumbs-nav-item {
        float: left;
        margin-right: 8px;
    }
    .crumbs-link, .crumbs-nav-item .menu-drop, .crumbs-nav-item .selector-set {
        float: left;
        margin-right: 5px;
    }
    .menu-drop .trigger {
        display: inline-block;
        height: 22px;
        padding: 0 4px 0 8px;
        border: 1px solid #ddd;
        line-height: 22px;
        vertical-align: top;
    }
    .menu-drop .trigger .curr {
        display: inline-block;
        vertical-align: top;
    }
    .menu-drop .menu-drop-arrow {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: top;
        /*background: url(//misc.360buyimg.com/product/list/1.0.4/css/i/search.ele.png) no-repeat 4px 7px;*/
        -webkit-transition: background-position .15s ease-in-out;
        -moz-transition: background-position .15s ease-in-out;
        transition: background-position .15s ease-in-out;
    }
    .menu-drop-main {
        display: none;
        width: 350px;
        padding: 10px 0 10px 8px;
        position: absolute;
        left: 0;
        top: 23px;
        border: 1px solid #ddd;
        background-color: #fff;
    }
    .menu-drop-list li {
        float: left;
        width: 65px;
        height: 24px;
        overflow: hidden;
        line-height: 24px;
        margin-right: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .menu-drop-list li a {
        text-decoration: none;
    }
    .crumbs-link, .crumbs-nav-item .menu-drop, .crumbs-nav-item .selector-set {
        float: left;
        margin-right: 5px;
    }
    .z-menu-drop-open {
        position: relative;
        z-index: 5;
    }
    .menu-drop:hover {
        text-decoration: none;
    }
    .menu-drop {
        display: inline-block;
        height: 24px;
        cursor: pointer;
    }
</style>
<div class="crumbs-nav-item">
    <div class="menu-drop">
        <div class="trigger">
            <span class="curr">电脑配件</span>
        <i class="menu-drop-arrow"></i>
    </div>
        <div class="menu-drop-main">
        <ul class="menu-drop-list">
            <li>
                <a href="/670-671.html" title="电脑整机">电脑整机</a><
            /li>
            <li>
                <a href="/670-677.html" title="电脑配件">电脑配件</a>
            </li>
            <li>
                <a href="/670-686.html" title="外设产品">外设产品</a>
            </li>
        </ul>
    </div>
    </div>
    <i class="crumbs-arrow">&gt;</i>
</div>
<script>
    $(function(){
        $('.menu-drop').hover(function(){
            $(this).addClass('z-menu-drop-open');
            $(this).closest('.crumbs-nav-item').find('.menu-drop-main').show();
            $(this).closest('.crumbs-nav-item ').find('.menu-drop-list li a').show();

        },function(){
            $(this).removeClass('z-menu-drop-open');
            $('.menu-drop-main').hide();
            $('.menu-drop-list li a').hide();

        });
    })
</script>
</body>
</html>